<template>
  <div class="order">
    <div class="mine-con">
      <el-table
        ref="multipleTable"
        :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" min-width="1" show-overflow-tooltip header-align="center"> </el-table-column>
        <el-table-column label="订单编号" min-width="1" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="type" label="充值金额" min-width="1" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="xinyongka" label="充值方式" show-overflow-tooltip min-width="1"> </el-table-column>
        <el-table-column prop="fname" label="创建日期" min-width="2" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="zhengjianhao" label="状态" show-overflow-tooltip min-width="1"> </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip header-align="center" min-width="2">
          <el-button @click="dialogAdd = true">开票</el-button>
          <el-button @click="dialogTable = true">查看</el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            :pager-count="5"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 开票 -->
    <el-dialog title="开票" id="Add" :visible.sync="dialogAdd" style="margin-top:-5vh">
      <el-form>
        <el-form-item label="发票类型">
          <div class="text">普通发票</div>
        </el-form-item>
        <el-form-item label="发票金额">
          <div class="text">1600.00元</div>
        </el-form-item>
        <el-form-item label="发票内容">
          <div class="text">技术服务费</div>
        </el-form-item>
        <el-form-item label="发票抬头">
          <el-input v-model="nowtaitou" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input v-model="nowidentify" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="nowname" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号">
          <el-input v-model="nowphone" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="接收地址">
          <el-input type="textarea" rows="3" placeholder="请输入" v-model="nowaddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogAdd = false">提交</el-button>
      </div>
    </el-dialog>

    <!-- 查看的弹框 -->
    <el-dialog title="开票详情" :visible.sync="dialogTable" style="margin-top:10vh" id="preview">
      <table id="dialogTable">
        <tr>
          <td>发票类型</td>
          <td>普通发票</td>
        </tr>
        <tr>
          <td>发票金额</td>
          <td>互联网</td>
        </tr>
        <tr>
          <td>发票内容</td>
          <td>14144141414654165644</td>
        </tr>
        <tr>
          <td>发票抬头</td>
          <td>马宇</td>
        </tr>
        <tr>
          <td>纳税人识别号</td>
          <td>145454545748574545</td>
        </tr>
        <tr>
          <td>联系人姓名</td>
          <td>13994981084</td>
        </tr>
        <tr>
          <td>联系人电话</td>
          <td>13994981084</td>
        </tr>
        <tr>
          <td>接收地址</td>
          <td>13994981084</td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTable: false, //查看的弹框
      dialogAdd: false, //开票的弹框
      formLabelWidth: '120px',
      tableData: [
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },

        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },

        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },

        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        },
        {
          name: '王小虎',
          type: '1',
          xinyongka: 11111111,
          fname: '张志伟',
          zhengjianhao: 1222222,
          date: '202020202',
          phone: 1111111
        }
      ], //存放后台拿来的数据
      multipleSelection: [],
      currentPage: 1, //当前的页数
      pageSize: 8, //每一页存放的数据条数
      //一下是当前操作某条数据的时候比如增加的时候要记录 修改的时候也要记录
      nowtype: '1',
      nowMuch: 11111111,
      nowCon: '张志伟',
      nowtaitou: '', //发票抬头
      nowidentify: '', //纳税人识别号
      nowname: '', //联系人姓名
      nowphone: '', //联系人手机号
      nowaddress: '' //联系人地址
    }
  },
  methods: {
    //查找符合条件的数据
    find() {
      // console.log(this.value1, this.value2);
      var date1 = new Date(this.value1)
      var date2 = new Date(this.value2)
      //我的想法是 将时间装换为毫秒反而更好比较 用getTime()的方法
      console.log(date1.getTime(), date2.getTime())
    },
    //数据单选
    toggleSelection(rows) {
      console.log(rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //全选和全不选
    handleSelectionChange(val) {
      console.log(val)
    },
    //点击左右跳转页码
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = val
    },
    //点击跳转对应的页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
    }
  }
}
</script>
<style scoped lang="scss">
.order {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //表格的基本样式
  //标头的背景颜色
  /deep/.el-table th {
    background: #f7ffe9;
  }
  //表格的地边框去掉
  /deep/.el-table td,
  .el-table th.is-leaf {
    border-bottom: none;
  }
  //表格的高度
  /deep/ .el-table tr {
    height: 68px;
  }
  /deep/.el-checkbox__inner {
    width: 18px;
    height: 18px;
  }
  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 11px;
    left: 5px;
    position: absolute;
    top: 0px;
    width: 6px;
  }
  // 选中表格的样式
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #fff;
    border: 1px solid #979797;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: rgba(216, 216, 216, 1);
    border: none;
  }

  .mine-con {
    margin-top: 8px;
    flex: 1;
    .page {
      padding: 20px 0;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      background-color: #fff;
    }
    table {
      tr {
        td,
        th > div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        td {
          .el-button {
            width: 71px;
            height: 28px;
            padding: 0;
          }
        }
      }
    }
  }

  /deep/#Add {
    .el-dialog {
      width: 35%;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 18px;
          color: rgba(113, 113, 113, 1);
          letter-spacing: 1px;
        }
        .el-dialog__headerbtn {
          top: 11px;
          .el-icon-close {
            font-size: 30px;
            font-weight: 600;
            color: #999999;
          }
        }
      }
      .el-dialog__body {
        .el-form-item__label {
          width: 25%;
          font-size: 18px;
          color: rgba(125, 125, 125, 1);
          letter-spacing: 1px;
          padding-right: 20px;
        }
        .el-form-item__content {
          display: flex;
          .text {
            width: 60%;
            font-size: 18px;
            color: rgba(35, 183, 105, 1);
            letter-spacing: 1px;
            margin-left: 14px;
          }
          .el-textarea,
          .el-input {
            width: 60%;
            .el-textarea__inner,
            .el-input__inner {
              background: rgba(235, 248, 236, 1);
              border-radius: 6px;
              border: 1px solid rgba(35, 183, 105, 1);
              font-size: 18px;
              font-weight: 300;
              color: rgba(87, 197, 120, 1);
              letter-spacing: 1px;
            }
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
        padding-bottom: 40px;
        .el-button {
          margin-right: 50px;
        }
      }
    }
  }
  /deep/#preview {
    .el-dialog {
      width: 35%;
    }
    .el-dialog__header {
      .el-dialog__title {
        font-size: 18px;
        color: rgba(113, 113, 113, 1);
        letter-spacing: 1px;
      }
      .el-dialog__headerbtn {
        top: 11px;
        .el-icon-close {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding: 30px;
      padding-bottom: 60px;
    }
  }
  #dialogTable {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 10%;
    tr > td {
      font-size: 18px;
      font-weight: 400;
      padding: 15px 20px;
      letter-spacing: 1px;
      border: 1px solid rgba(216, 216, 216, 1);
    }
    tr > td:nth-child(2n) {
      width: 60%;
      color: rgba(63, 190, 113, 1);
    }
    tr > td:nth-child(2n-1) {
      width: 40%;
      color: rgba(136, 136, 136, 1);
    }
  }
}
</style>
